<template>
  <div class="todo-list container">
    <div class="tabs is-centered is-medium">
      <ul>
        <li :class="{'is-active':shows===1}" @click="allShow()"><a>所有({{ todos.length }})</a></li>
        <li :class="{'is-active':shows===2}" @click="completedShow()"><a>已完成({{ completeds().length }})</a></li>
        <li :class="{'is-active':shows===3}" @click="uncompletedShow()"><a>未完成({{ uncompleteds().length }})</a></li>
      </ul>
    </div>
    <div class="columns is-multiline is-mobile">
      <div class="column is-one-quarter" v-for="arr in arrs" :key='arr.id'>
        <!-- <todo-item :item='todo' @remove="$emit('removeItem', $event)"
          ></todo-item> --><!-- 跨组件通信时，将TodoList作为中间媒介进行传递数据使用到的-->
          <todo-item :item='arr'></todo-item>
      </div>
    </div>
  </div>
</template>

<script>
import TodoItem from './TodoItem'
export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  data () {
    return {
      shows: 1,
      arrs: this.todos,
      completeds () {
        const arrs = this.todos.filter(todo => todo.completed === true)
        return arrs
      },
      uncompleteds () {
        const arrs = this.todos.filter(todo => todo.completed === false)
        return arrs
      }
    }
  },
  props: {
    todos: Array,
    default: function () {
      return []
    }
  },
  watch: {
    todos: function (newarrs, oldarrs) {
      if (this.shows === 1) {
        this.arrs = this.todos
      } else if (this.shows === 2) {
        this.arrs = this.completeds()
      } else if (this.shows === 3) {
        this.arrs = this.uncompleteds()
      }
      console.log(newarrs, oldarrs)
    }
  },
  methods: {
    allShow () {
      this.shows = 1
      this.arrs = this.todos
    },
    completedShow () {
      this.shows = 2
      this.arrs = this.completeds()
    },
    uncompletedShow () {
      this.shows = 3
      this.arrs = this.uncompleteds()
    }
  }
}
</script>

<style lang="scss">

</style>
